<script setup lang="ts">
import { useSettingsStore } from "../stores/settings";
import { useWindowManager } from "../composables/useWindowManager";

interface Props {
  title: string;
  viewMode: "list" | "calendar";
}

defineProps<Props>();

const emit = defineEmits<{
  "go-to-today": [];
}>();

const settingsStore = useSettingsStore();
const { switchToFloating } = useWindowManager();

function handleGoToToday() {
  emit("go-to-today");
}

function handleToggleView() {
  settingsStore.toggleViewMode();
}

async function handleSwitchToFloating() {
  await switchToFloating();
}
</script>

<template>
  <div class="toolbar">
    <h1 class="title">{{ title }}</h1>
    <div class="toolbar-actions">
      <button @click="handleGoToToday" class="today-btn" title="回到今天">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="18"
          height="18"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        >
          <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
          <line x1="16" y1="2" x2="16" y2="6"></line>
          <line x1="8" y1="2" x2="8" y2="6"></line>
          <line x1="3" y1="10" x2="21" y2="10"></line>
        </svg>
        今天
      </button>
      <button @click="handleToggleView" class="view-mode-btn" title="切换视图">
        <svg
          v-if="viewMode === 'list'"
          xmlns="http://www.w3.org/2000/svg"
          width="18"
          height="18"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        >
          <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
          <line x1="3" y1="10" x2="21" y2="10"></line>
        </svg>
        <svg
          v-else
          xmlns="http://www.w3.org/2000/svg"
          width="18"
          height="18"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        >
          <line x1="8" y1="6" x2="21" y2="6"></line>
          <line x1="8" y1="12" x2="21" y2="12"></line>
          <line x1="8" y1="18" x2="21" y2="18"></line>
          <line x1="3" y1="6" x2="3.01" y2="6"></line>
          <line x1="3" y1="12" x2="3.01" y2="12"></line>
          <line x1="3" y1="18" x2="3.01" y2="18"></line>
        </svg>
        {{ viewMode === "list" ? "日历" : "列表" }}
      </button>
      <button
        @click="handleSwitchToFloating"
        class="floating-btn"
        title="切换到悬浮窗口"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="18"
          height="18"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        >
          <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
          <path d="M9 3v18"></path>
          <circle cx="15" cy="9" r="2"></circle>
        </svg>
        悬浮
      </button>
    </div>
  </div>
</template>

<style scoped>
.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-secondary);
}

.title {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.toolbar-actions {
  display: flex;
  gap: 8px;
}

.today-btn,
.floating-btn,
.view-mode-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.today-btn:hover,
.floating-btn:hover,
.view-mode-btn:hover {
  background: var(--text-primary);
  color: var(--bg-primary);
  border-color: var(--text-primary);
}
</style>
